<template>
  <div class="index">
    <div class="left">
        <h2>热映中</h2>
        <div class="movie-list">
            <div class="img-item" v-for="item in movieList" :key="item.id" @mouseover="flags=true" @mouseleave="flags=false">
                <el-image :src="item.url"></el-image>
                
                <div class="info" v-if="flags">
                    <el-image :src="item.url"></el-image>
                    <p>name</p>
                    <p>type</p>
                    <p>time</p>
                </div>
                <span>11</span>
            </div>
        </div>
    </div>
    <div class="right">
        <h2>票房榜</h2>
        <div class="rank-list">
            <p v-for="item,index in rankList" :key="item.id" class="row">
                <span class="num">{{ index }}</span><span class="name">{{ item.name }}</span>
            </p>
        </div>
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue';
const flags = ref(false);
const movieList = ref([
    {id:1,url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
    {id:2,url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
    {id:3,url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
    {id:4,url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
    {id:5,url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
    {id:6,url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
    {id:7,url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
    {id:8,url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
    {id:9,url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
    {id:10,url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
    {id:11,url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
    {id:12,url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
    {id:13,url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'}

])

// 排行榜
const rankList = ref([
    {id:1,name:'kkk'},
    {id:2,name:'kkk'},
    {id:3,name:'kkk'}
])
// 预览
const previewMovie = (id) => {
    console.log(id)
    let index = movieList.value.findIndex(item => item.id == id)
    if(index != -1){
        return flags.value = true
    }
}
</script>

<style lang="scss" scoped>
.index{
    display: flex;
    margin: 20px 0;
    .left{
        width: 60%;
    }
    .right{
        .rank-list{
            .row{
                padding: 10px 0;
                font-size: 20px;
                .num{
                color: orange;
                margin-right: 20px;
            }
            }
        }
    }
    .movie-list{
        // display: flex;
        // flex-wrap: wrap;
        // justify-content: space-between;
        // .img-item{
        //     width: 200px;
        //     height: 250px;
        //     margin-bottom: 20px;
        //     .el-image{
        //         width: 100%;
        //         height: 100%;
        //     }
        // }
        display: flex;
        flex-wrap: wrap;
        .img-item{
            width: 140px;
            height: 160px;
            margin-bottom: 20px;
            margin: 20px 8px;
            image{
                width: 80%;
                height: 100%;
                &:hover{
                width: 150%;
            }
            }
            
        }
    }
    h2{
        padding: 0;
        text-align: left;
    }
}
</style>